
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="__PUBLIC__/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/iconfont.css"/>
	<script src="__PUBLIC__/js/mui.min.js"></script>
	<!-- <link rel="stylesheet" href="__PUBLIC__/css/gamestart.css" /> -->

	<style type="text/css">
		body{
			line-height: 24px;
			font-size: 16px;
			font-family: "仿宋";
		}

		/*添加背景图*/
		.mui-content{
			/*position: absolute;*/
			/*background: url(__PUBLIC__/image/backg.jpg) no-repeat;*/
			/*width: 100%;*/
			/*height: 100%;*/
			/*background-size: 100% 100%;*/
			/*z-index: -1;*/
			/*margin:0 auto;*/
		}

		/*题目*/
		.ti{
			/*position: absolute;*/
			/*border: 2px solid #8B8E8E;*/
			padding: 15px;
			/*width: 80%;*/
			margin-top: 5%;
			margin-left: 5%;
			margin-right: 5%;
			margin-bottom: 8px;
			/*background: rgba(30,144,255,0.5);*/
			border-radius: 20px;
			font-size: 18px;

		}

		/*选项*/
		.choose{
			/*position: absolute;*/
			/*border: 1px solid #8B8E8E;*/
			padding: 10px;
			width: 80%;
			/*top: 35%;*/
			/*left: 12%;*/
			margin-left: 8%;
			margin-bottom: 5%;
			/*background: rgba(255,255,255,0.5);*/
			border-radius: 20px;
		}

		.in-line {
		    display: inline-block;
		}

		.tijiao img{
			margin-left: 20%;
			width: 45%;
			z-index: 1;
			/*position: absolute;*/
			/*width: 55%;*/
			/*height: 23%;*/
			/*height: 23%;*/
			/*top: 55%;*/
			/*left: 20%;*/

		}
		/*提交*/

		#tijiao{
			pointer-events: none;
		}

	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
		<h1 class="mui-title" id="head"></h1>
	</header>
	<div class="mui-content">
	    <div class="dati" id="dati">
		    <!--题干-->
		    <div class="ti" id="ti">
		    	<!-- <span style="font-size: 20px;padding: 10px;">
		    		测试：1.机动车在高速公路上行驶，车速低于每小时100公里时，与同车道前车距离可以适当缩短，但最小距离不得少于__。
		    	</span> -->
		    </div>
		    <!--选项-->
		    <div class="choose" id="choose">
		    	<!-- <div class="mui-input-row mui-radio mui-left">
		    	    <label>测试：1</label>
		    	    <input name="radio" type="radio" value="A" >
		    	</div>
		    	<div class="mui-input-row mui-radio mui-left">
		    	    <label>测试：2</label>
		    	    <input name="radio" type="radio" value="B" >
		    	</div>
		    	<div class="mui-input-row mui-radio mui-left">
		    	    <label>测试：3</label>
		    	    <input name="radio" type="radio" value="C" >
		    	</div>
		    	<div class="mui-input-row mui-radio mui-left">
		    	    <label>测试：4</label>
		    	    <input name="radio" type="radio" value="D" >
		    	</div> -->
		    </div>
	    </div>
	    <!--提交-->
	    <div class="tijiao" id="tijiao">
		    <img id="tijiao_tu" src="__PUBLIC__/image/submitBtn.png"/>
	    </div>
	</div>
	<script>
		byId = function(id){
			return document.getElementById(id);
		}
		var head = byId('head');
		var ti = byId('ti');
		var choose = byId('choose');
		var tijiao = byId('tijiao');
		var tijiao_tu = byId('tijiao_tu');

		mui.ajax('/answer/public/index.php/checklogin',{
			dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            async:false,
            success:function(data){
                message = data.message;
            },
            error:function(xhr,type,errorThrown){
                console.log(type);
            }
		});

		if(message == "已登录")
		{
			// 答题列表
			mui.ajax('/answer/public/index.php/qlists',{
	            dataType:'json',//服务器返回json格式数据
	            type:'post',//HTTP请求类型
	            timeout:10000,//超时时间设置为10秒；
	            async:false,
	            success:function(reponse_data){
	            	if(reponse_data.status == 0){
		            	topics = reponse_data.data;
						console.log(topics);
						// console.log(topics.length);
	            	}
	            }
	        });

	        function timuinfo(num,infos){
	        	console.log("num:"+num);
	        	// if(infos.length > 0){
	        	if( num < infos.length){
					if(infos[num]['questionType'] == 1)
					{
						console.log("单选题");
						// 单选题
						head.innerHTML = "单选题";
						ti.innerHTML = infos[num]['questionTitle'];
						choose.innerHTML = "";
						for(let r = 0; r < infos[num]['questionOption'].length; r++){
							choose.innerHTML +='<div class="mui-input-row mui-radio mui-left" onclick="danji();">'+
								'<label name="T">'+infos[num]['questionOption'][r]+'</label>'+
								'<input type="radio" value='+r+' name='+num+'Ti>'+
							'</div>';
						}
					}
					else if(infos[num]['questionType'] == 2)
					{
						console.log("多选题");
						// 多选题
						head.innerHTML = "多选题";
						ti.innerHTML = infos[num]['questionTitle'];
						choose.innerHTML = "";
						for(let r = 0; r < infos[num]['questionOption']; r++){
							choose.innerHTML +='<div class="mui-input-row mui-checkbox mui-left" onclick="danji();">'+
								'<label name="T">'+infos[num]['questionOption'][r]+'</label>'+
								'<input type="checkbox" value='+r+' name='+num+'Ti>'+
							'</div>';
						}
					}
					else if(infos[num]['questionType'] == 3)
					{
						console.log("判断题");
						// 判断题
						head.innerHTML = "判断题";
						ti.innerHTML = infos[num]['questionTitle'];
						choose.innerHTML = "";
						for(let r = 0; r < infos[num]['questionOption'].length; r++){
							choose.innerHTML +='<div name="test" class="mui-input-row mui-radio mui-left in-line" onclick="danji();">'+
								'<label name="T">'+infos[num]['questionOption'][r]+'</label>'+
								'<input type="radio" value='+r+' name='+num+'Ti>'+
							'</div>';
						}
					}
	        	}else{
	        		// window.location.href = "/answer/public/index.php/phome";
	        		mui.ajax('/answer/public/index.php/checkreward',{
	        			dataType:'json',//服务器返回json格式数据
			            type:'post',//HTTP请求类型
			            timeout:10000,//超时时间设置为10秒；
			            success:function(reponse_data){
		        			alert(reponse_data.message);
	        				window.setTimeout("window.location.href = '/answer/public/index.php/phome'",1000);
			            }
	        		});
	        	}
			}

			// 每次都从第一个开始
			answerTimes = 0;
			console.log(answerTimes);
			timuinfo(answerTimes,topics);
			// 未选择前，无法提交
			function danji(){
				document.getElementsByClassName('tijiao')['0'].removeAttribute('id');
			}
			// 获取选项结果函数
			function getRadioRes(Name){
			    var rdsObj = document.getElementsByName(Name);
			    var checkVal = [];
			    for(b = 0; b < rdsObj.length; b++){
			        if(rdsObj[b].checked == true){
			        	checkVal[b] = rdsObj[b].value;
			        }
			    }
			    return checkVal;
			}
			tijiao_tu.addEventListener('tap',function(){
				// 提交后，需再次选中选项
				document.getElementsByClassName('tijiao')['0'].setAttribute('id','tijiao');
				var selectvalue=null;   //  selectvalue为radio中选中的值
				choice = [];
				choice = getRadioRes(answerTimes+'Ti');
				var selectvalue = choice.join('');
				// console.log(selectvalue);
				// 将选中的数据传入后台判断正误
				mui.ajax('/answer/public/index.php/check',{
					data:{
						// answerTimes:answerTimes,
						questionNo:topics[0]['questionNo'],
						selectV:selectvalue,
					},
		            dataType:'json',//服务器返回json格式数据
		            type:'post',//HTTP请求类型
		            timeout:10000,//超时时间设置为10秒；
		            success:function(reponse_data){
		            	// console.log(reponse_data);
		            	mui.toast(reponse_data.message);
		            	answerTimes = answerTimes + 1;
		            	console.log(answerTimes);
		            	timuinfo(answerTimes,topics);
		            }
		        });
			});

		}
		else
		{
			document.getElementsByTagName("body")[0].innerHTML = "<h1 align=center style='margin-top: 50%;'>请登录。。。</h1>";
	        window.setTimeout("window.location.href = '/answer/public/index.php/plogin'",500);
		}
	</script>
</body>

</html>